<template>
	<rui-pages>
		<view class="message">
			<view class="message_item" v-for="(item, index) in list" :key="index">
				<view class="message_item_mask" v-if="item.status == 1"></view>
				<view class="message_item_content">
					{{item.content}}
				</view>
				<view class="message_item_bottom">
					<view class="message_item_bottom_category">
						{{item.category}}
					</view>
					<view class="message_item_bottom_date">
						{{item.created_at}}
					</view>
				</view>
			</view>
		</view>

		<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
	</rui-pages>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onReachBottom,
	} from "@dcloudio/uni-app"
	import {
		apiGetMessageList,
		apiReadMessage
	} from "@/common/api.js"
	import {
		userStore
	} from "@/store/index.js"

	const user = userStore();
	let list = ref([]),
		loading = ref(true),
		status = ref('more'),
		params = reactive({
			page: 1,
			limit: 15
		}),
		contentText = ref({
			contentdown: '点击加载更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多了'
		});

	onLoad(option => {
		getData();
	})

	const getData = () => {
		apiGetMessageList(params).then(res => {
			if (params.page == 1) {
				user.setMsg(0)
				apiReadMessage()
			}

			list.value = list.value.concat(res.data);
			if (res.data.length < params.limit) {
				status.value = 'no-more';
			} else {
				status.value = 'more';
			}
		})
	}


	onReachBottom(() => {
		if (status.value == 'more') {
			params.page++;
			getData()
		}
	})
</script>

<style lang="scss" scoped>
	.message {
		&_item {
			margin: 20rpx;
			background: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
			position: relative;

			&_mask {
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				background: #f30;
				position: absolute;
				top: 10rpx;
				right: 30rpx;
			}

			&_bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				&_category {
					background: #f5f6f7;
					padding: 2rpx 15rpx;
					border-radius: 30rpx;
					font-size: 24rpx;
					color: #999;
				}

				&_date {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
</style>